<template>
  <div class="body">
    <vue-hash-calendar model="inline" :visible.sync="isShowCalendar" picker-type="date" :format="calDateFormat"
      :min-date="new Date()" :is-show-arrow="true" :is-show-week-view="true" :themeColor="calTheme"
      @change="dateChange">
      <div slot="day" slot-scope="scope">
        <div class="lunar-content">
          <div>{{ scope.date.day }}</div>
          <div class="lunar">{{ showLunar(scope.date) }}</div>
        </div>
      </div>
    </vue-hash-calendar>
  </div>
</template>

<script>
import { lunar } from '@/utils/lunar';

export default {
  name: 'WeekPicker',
  props: {
    format: { // 日期格式
      type: Number,
      required: false
    },
    theme: { // 主题定制, 详情将 https://www.npmjs.com/package/vue-hash-calendar themeColor 属性
      type: Object,
      required: false
    },
  },
  data() {
    return {
      isShowCalendar: true, // 显示日历
      calDateFormat: this.format || "YY/MM/DD",
      calTheme: this.theme || {
        'main-color': '#766AFF', // 主题颜色, 如选中日期背景颜色
        'bg-color': '#ECEBFF', // 背景颜色, 如右上角空白部分的颜色
        'main-font-color': '#766AFF', // 前景颜色, 如左上角文字颜色
        'vice-font-color': '#999999' // 星期栏文字颜色
      }
    }
  },
  mounted() { },
  methods: {
    showLunar(date/*{"year":2024,"month":11,"day":24,"hours":11,"minutes":39}*/) {
      if (!date || !date.day) { return }
      const lunarObj = lunar.solar2lunar(date.year, date.month + 1, date.day);
      return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn;
    },
    dateChange(dtStr/*选中的日期 格式为 format 属性指定的格式*/) {
      this.$emit('choosed', new Date(dtStr));
    }
  }
}
</script>

<style lang="scss" scoped>
.lunar-content {
  display: flex;
  align-items: center;
  flex-direction: column;

  .lunar {
    font-size: 12px;
    transform: scale(0.8);
    width: 10vw;
    text-align: center;
  }
}
</style>